<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>apobates jQuery dialog plug</title>
<style type="text/css">
/*插件需要的样式*/
/*overlay*/
.dialog_overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	/*visibility: hidden;*/
	top: 0;
	left: 0;
	z-index: 10010;
	/*opacity: 0;*/
	background: rgba(0,0,0,0.5);
	transition: all 0.3s;
}
#apoDialog{
    /*display:none;*/
	/*top: 300px;*/
	/*left: 300px;*/

}

.dialog_footer{margin:0}
        .dialog_footer>a{display:inline-block;width:50%;line-height:40px;height:40px;text-align:center;color:#666}
        .dialog_footer>a.active{background-color:#f1f1f1;color:#005CA1}        
.dialog{position: fixed;z-index: 10012;background-color:#fff; border-width:10px;border-color:rgba(0,0,0,.55);border-style:solid}
.dialog_closed{
        position:absolute;
        right:0;top:0;
        
        display: inline-block;
        height: 30px;
        width: 30px;
        background-repeat:no-repeat;font-size:0;overflow:hidden;cursor:pointer;
        
}
/*css3 draw x*/
.dialog_closed:before,.dialog_closed:after{
    content:"";position:absolute;background:transparent;font-size:1em;
    width:100%;height:5%;
    background:#999 none repeat scroll 0 0;
    left:1%;top:50%;
}
.dialog_closed:before{
    transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);
}
.dialog_closed:after {
    transform:rotate(130deg);-webkit-transform:rotate(130deg);-moz-transform:rotate(130deg);-o-transform:rotate(130deg);
}
.dialog div{padding:2em 30px;}
.dialog>p:first-child{height:30px;line-height:30px;text-indent:10px;background-color:#f1f1f1;color:#333}
/*测试页面布局*/
*{margin:0;padding:0;}
header{height:30px;background-color:#ddd;overflow:hidden}
        #account{float:right;padding-right:2em;width:200px;line-height:30px;}
                #account a{display:inline-block;padding:0 10px}
                #account p{width:200px;line-height:30px;}
#pop_win{
        background-color:#f1f1f1;
        display:none;
        padding:1.2em;
}
        #pop_win >p{width:200px;padding:5px 0;text-indent:0!important;}
                #pop_win >p label{width:80px;display:inline-block;text-align:right;}
                #pop_win >p input{}
        #pop_win >p:last-child{margin-left:85px;}
                #pop_win >p:last-child input{}
</style>
</head>

<body>
<header>
        <a href="/">apobates</a>
        <div id="account">
                <a href="javascript:;">login</a><a href="javascript:;">register</a>
        </div>
</header>
<div id="pop_win">
        <p><label for="username">用户名:</label>
                <input type="text" name="username" size="10" />
        </p>
        <p><label for="userpswd">密码:</label>
                <input type="password" name="userpswd" size="10" />
        </p>
        <p>
                <input type="submit" name="btn" value="登录" />
        </p>
</div>
<script type="text/javascript" charset="UTF-8" src="http://libs.baidu.com/jquery/1.8.1/jquery.min.js"></script>
<!--拖拽插件，也可以使用jQuery UI-->
<script type="text/javascript" charset="UTF-8" src="https://github.com/jeremyckahn/dragon/blob/master/src/jquery.dragon.js"></script>
<script type="text/javascript" charset="UTF-8" src="jquery.apoDialog.js"></script>
<script type="text/javascript">
jQuery(function($){
        //注掉的都已经基本测试
        //$.apoDialog.alert("正在加载数据");
        //$.apoDialog.alert({tip:"正在加载数据",redirect:'http://cn.bing.com/'});
        //$.apoDialog.alert({tip:"正在加载数据",redirect:'http://cn.bing.com/'},{ok:'立即',cancel:'关闭'});
        //$.apoDialog.alert({title:'消息提示窗口',tip:"正在加载数据",redirect:'http://cn.bing.com/',isClosed:true});
        //$.apoDialog.setZIndex(100010).body({container:'#pop_win'});
        /*
        $.apoDialog.alert({tip:"恭喜您注册成为我们的新会员:xiaofanku@live.cn",onOk:function(){
                $('#account >a:first').before('<p>xiaofanku@live.cn</p>');
        }},{ok:'确认',cancel:'关闭'});
        */
        $.apoDialog
        .setZIndex(100010)
        .init(function(e,dialog){
                $('#pop_win >p').css('width','240px');
        })
        .body({container:'#pop_win'})
        .done(function(){
                $('input:submit')
                .click(function(){
                        var un=$('input[name=username]').val();
                        
                        $.apoDialog
                        .alert({tip:"恭喜您注册成为我们的新会员:"+un,onOk:function(){
                                $('#account >a:first').before('<p>'+un+'</p>');
                        }},{ok:'确认',cancel:'关闭'});
                        return false;
                });
        });
        
});

</script>
</body>
</html>
